import React, { useEffect, useState } from 'react'
import { Card, Tree, Row, Col, Pagination, Tag, Table, Button } from 'antd'
import { useParams } from 'react-router-dom'

import {
  IdepList,
  IsrbookingRuleList,
} from '@/api/hospital/model/hospitalListTypes'
import { reqDepartments, reqScheduleRules } from '@api/hospital/hospitalList'
export default function HospitalSchedule() {
  // 当前医院的hoscode
  const { hoscode } = useParams()
  // 定义存储所有科室数据的状态
  const [depList, setDepList] = useState<IdepList>([])
  // 存储了所有要展开的科室的depcode数组
  const [depcodeList, setDepCodeList] = useState<string[]>([])

  // 存储排班规则的数据
  const [scheduleRules, setScheduleRules] = useState<IsrbookingRuleList>([])

  useEffect(() => {
    async function fetchData() {
      // 获取所有科室的数据
      // 这里给getDepList前面加await是希望所有科室数据获取成功之后,在执行后面获取排班规则的代码
      const result = await getDepList()
      // 获取排班规则, 默认传入的是 多发性硬化专科门诊的depcode
      getScheduleRules(result[0].children ? result[0].children[0].depcode : '')
    }
    fetchData()
  }, [])

  // 获取所有科室数据的方法
  async function getDepList() {
    const result = await reqDepartments(hoscode as string)
    // 让所有一级科室禁用,往对应的数据里面加disabled:true
    result.forEach((item) => {
      item.disabled = true
    })
    // 设置所有科室数据
    setDepList(result)
    // 拿到所有一级科室的depcode,然后存储起来.让所有一级科室展开
    setDepCodeList(result.map((item) => item.depcode))
    return result
  }
  // 获取排班规则的方法(Tag的数据)
  async function getScheduleRules(depcode: string) {
    const result = await reqScheduleRules({
      page: 1,
      pageSize: 5,
      hoscode: hoscode as string,
      depcode,
    })
    setScheduleRules(result.bookingScheduleList)
  }
  // 选择科室时,触发的事件处理函数
  const onSelect = (selectedKeys: any, info: any) => {
    console.log('selected', selectedKeys, info)
  }

  // 计算树形控件父元素的高度
  const treeWrapper = document.body.clientHeight - 64 - 34 - 24 * 2 - 14 - 22

  const columes = [
    {
      title: '序号',
      render: (text: any, record: any, index: number) => {
        return index + 1
      },
    },
    {
      title: '职称',
    },
    {
      title: '号源时间',
    },
    {
      title: '可预约数',
    },
    {
      title: '剩余预约数',
    },
    {
      title: '挂号费(元)',
    },
    {
      title: '擅长技能',
    },
  ]

  return (
    <Card>
      <p>选择：北京协和医院 / 多发性硬化专科门诊 / 2022-04-28</p>
      <Row gutter={20}>
        <Col span={5}>
          <div
            style={{
              border: '1px solid #ccc',
              height: treeWrapper,
              overflow: 'auto',
            }}
          >
            <Tree
              defaultExpandedKeys={['0-0-0', '0-0-1']}
              onSelect={onSelect}
              treeData={depList as any}
              expandedKeys={depcodeList} // 让树结构的指定节点展开的配置项
              // Tree组件,默认展示的是treeData中的title和key.但是我们的数据中没有,对应的是depname和depcode,
              // 所以设置fieldName.告诉Tree组件去选渲染指定的数据
              fieldNames={{
                title: 'depname',
                key: 'depcode',
              }}
            />
          </div>
        </Col>
        <Col>
          {scheduleRules.map((item, index) => (
            <Tag color="green" key={index}>
              <div>
                {item.workDate} {item.dayOfWeek}
              </div>
              <div>
                {item.availableNumber} / {item.reservedNumber}
              </div>
            </Tag>
          ))}

          <Pagination
            total={50}
            style={{ marginTop: 20, marginBottom: 20 }}
            showSizeChanger={true}
          ></Pagination>
          <Table columns={columes} bordered></Table>
          <Button style={{ marginTop: 20 }}>返回</Button>
        </Col>
      </Row>
    </Card>
  )
}
